<template>
<div>
    <div class="mui-card">
		<div class="mui-card-content">
			<div class="mui-card-content-inner"> 
				<swiper :lunbotuList='lunbotu' :isfull='false'></swiper>
			</div>
		</div>
	</div>
        <div class="mui-card">
        <div class="mui-card-header">{{goodsInfo.title}}</div>
		<div class="mui-card-content">
            <div class="mui-card-content-inner">
				<p class="price">
					市场价：￥<span class="old_price">{{goodsInfo.market_price}}</span>&nbsp;&nbsp;销售价：<span class="now_price">￥{{ goodsInfo.sell_price }}</span>
				</p>
				<p class="inputnumber">
					购买数量：<inputNumber @getboxCount="getCount" :max="goodsInfo.stock_quantity"></inputNumber>
				</p>
				<p>
            		<mt-button type="primary" size="small">立即购买</mt-button>
            		<mt-button type="danger" size="small"  @click="showBox">加入购物车</mt-button>
				</p>
			</div>
		</div>
	</div>
	<!-- 小球动画 -->
	<transition 
	  @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
	>
		<div class="box" v-show="flagBox" ref="box"></div>
	</transition>

    <div class="mui-card">
        <div class="mui-card-header">商品参数</div>
		<div class="mui-card-content">
            <div class="mui-card-content-inner">
				<p>
					商品货号：{{goodsInfo.goods_no}}
				</p>
				<p>
					库存情况: {{goodsInfo.stock_quantity}}
				</p>
				<p>
					上架时间: {{goodsInfo.add_time | dateFormat}}
				</p>
			</div>
		</div>
		<div class="mui-card-footer">
        	<mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
        	<mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>			
		</div>
	</div>
</div>
</template>

<script>
import { Toast } from 'mint-ui';
import swiper from '../subcomponents/swiper'
///引入数字选择器
import inputNumber from '../subcomponents/goodsinfo_box'
export default {
	data(){
		return{
			id:this.$route.params.id,
			lunbotu:[],///存放图片的数组,
			goodsInfo:{},///存放
			flagBox:false,
			selectCount:1  ////默认商品数量为1

		}
	},
	methods:{},
	components:{
		swiper,inputNumber
	},
	created(){
		this.getLunbo();
		this.getGoodsInfo();

	},
	methods:{
		getLunbo(){
		this.$http.get('http://www.liulongbin.top:3005/api/getthumimages/'+this.id).then(res=>{
			if(res.body.status === 0)
			{
				///此时首页轮播图和图片详情页轮播图中传入的一个时src 一个时img，所以导致有一方出现不了图片
				///解决办法，遍历所获得的数组,为每一个元素加上一个src属性
				res.body.message.forEach(item=>{
					item.img = item.src
				})
				this.lunbotu = res.body.message;

			}else{
				Toast('轮播图加载失败！！！')

			}
		})
	},
	getGoodsInfo(){
		this.$http.get('http://www.liulongbin.top:3005/api/goods/getinfo/'+this.id).then(res=>{
			if(res.body.status === 0 ){
				this.goodsInfo = res.body.message[0]
			}
		})
	},
	goDesc(id){
		///图文介绍
		this.$router.push({name:'goodsDesc',params:{id} })

	},
	goComment(id){
		////评论详情
		this.$router.push({name:'goodsComment',params:{id}})
	},
	showBox(){
		this.flagBox = !this.flagBox
		////先拼接出一个商品信息的对象，在vuex对象中创建一个car数组存放拼接出的商品信息对象，
		let goodsInfo = {
			id:this.id,
			count:this.selectCount,
			price:this.goodsInfo.sell_price,
			select:true,//////true用来控制是否选择该像商品
		}
		this.$store.commit("addToCar",goodsInfo)
	},

	beforeEnter(el){
		el.style.transform = 'translate(0px,0	px)'

	},
	enter(el,done){
		el.offsetWidth;
		////获取小球和徽标的位置

		const ballOld = this.$refs.box.getBoundingClientRect();
		////获取徽标的位置，此时操作dom直接获取，因为是在同一页面中所以这里能直接用document.getelementByid直接获取到
		const badgeOld = document.getElementById('badge').getBoundingClientRect();
		const xDist = badgeOld.left - ballOld.left;
		const yDist = badgeOld.top - ballOld.top;

		el.style.transform = `translate(${xDist}px	,${(yDist)}px)`;


		el.style.transition = 'all 0.5s cubic-bezier(.4,-0.3,1,.68)';
		// done()////done设置调用一下afterEnter()这个函数
		done()

	},
	afterEnter(el){
		this.flagBox = !this.flagBox

	},
	getCount(count){
		//////获取文本框子组件中的数量
		this.selectCount = count
	}

	}


}
</script>

<style scoped>
.mui-card-footer{
	display: block;
}
.mint-button--large{
	margin: 15px 0;
}
.price .old_price{
	text-decoration: line-through;

}
.price .now_price{
	  color: red;
    font-size: 16px;
    font-weight: bold;
}
.inputnumber{
	display: flex;
	line-height: 30px
}
.box{
	width: 15px;
	height: 15px;
	background-color: red;
	position:absolute;
	z-index: 99;
	border-radius: 50%;
    transform: translate(152px,-118px);
}

</style>